Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drawer toggle a11y rebase #1032

Open
wants to merge 29 commits into
base: master
Choose a base branch
from
Open

Drawer toggle a11y rebase #1032

wants to merge 29 commits into from

Conversation

kimisgold
Copy link
Member

@kimisgold kimisgold commented Jul 10, 2024

Your rebase seems to keep everything from the original branch (#995). I'll include the original description here too.


This pull request consolidates multiple uses of the "drawer" pattern where a component can collapse and expand, and often be marked for removal or be dragged to create order. It also does the following:

  • Many interactive elements are now buttons, where they had been previously anchors or divs.
  • Buttons and other form elements now have descriptive aria-labels and titles.
  • There are now screen reader alerts for when new drawers have been added to the drawer list.
  • There is now Omeka.manageDrawers() in globals.js, to centralize near identical functionality spread across js for navigation and item type elements.

kimisgold added 29 commits June 26, 2024 15:41
* Use actual buttons for toggles and actions.
* Improve button and input labels for screen readers.
* Make drawer markup more consistent.
* Consolidate drawer js.
* Drawer toggles and remove actions are buttons.
* Improved aria labeling for drawer actions.
* Pull navigation link edit markup out into a partial for more legible
  management.
The js now covers toggling drawer contents and both delete and undo. The
"data-action-selector" attribute tells the js what selector to toggle on
relevant drawer components.
* Reduce redundancy in updateDeleteButtons. Most of it is now handled
in the shared manageDrawers function in globals.js.
* Manage display of 'remove/undo' buttons in the partial.
The way the partial was iterating resulted in duplicate ids.
New links were previously inserted into the navigation via the
javascript using separate markup. This allows us to manage consistent
markup for both new and existing navigation links. The form will include
an empty version of this partial as a template, then the javascript
clones and populates the template with new link data.
This allows the drawer javascript to listen to a larger container for
clicks on the drawer buttons. Previously on forms that add new drawers,
the new drawers would not get all the proper behaviors bound.
It's already called in edit-navigation.php.
* The form has an empty navigation link partial marked '.template'.
  The js clones the template and populates it with the relevant values.
* Omeka.Navigation.populateNewNavLinkAttributes() exists because
  there are so many attributes to update to keep the new links screen
  reader friendly, alongside submitting properly.
* The visit buttons are now actual buttons instead of links. The js has
  been updated accordingly.
* The add new link form now shows required field alerts if not filled
  out properly.
* Upon adding a new field, screen readers will read a success message
  that includes the total number of links on the form.
* Instances of '.main_link' selectors have been updated to
  '#navigation_main_list .main_link' to avoid picking up empty template
  values.
Buttons are buttons now.
It is confusing for identical "remove" buttons to perform differently on
the same form.
The controller now sends the temporary element id to the partials, which
can then be referenced in other uses of aria-labelledby.
@kimisgold kimisgold requested a review from zerocrates July 10, 2024 19:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant